<template>
  <div class="top-left">
    <div class="top-left-bg"></div>
    <div class="top-left-words hy-lingxinti">{{title}}</div>
    <div class="top-left-logo"></div>
  </div>
</template>
<script>
export default {
  name: 'topLeft',
  data() {
    return {
      title: '效果后评价总览'
    }
  },
  methods: {
    init() {
      let tl = new TimelineMax()
      let tw1 = TweenMax.to('.top-left .top-left-bg', 0.5, {
        opacity: 1,
        scaleY: 1,
        ease: Power3.easeInOut
      })
      let tw11 = TweenMax.to('.top-left .top-left-bg', 0.5, {
        scaleX: 1,
        ease: Power3.easeInOut
      })
      let tw2 = TweenMax.to('.top-left .top-left-words', 0.5, {
        opacity: 1,
        ease: Power3.easeInOut
      })
      let tw3 = TweenMax.to('.top-left .top-left-logo', 0.5, {
        opacity: 1,
        ease: Power3.easeInOut
      })
      tl.add(tw1, 0.2)
        .add(tw11, 0.5)
        .add(tw2, 0.7)
        .add(tw3, 0.9)
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.top-left {
  position: absolute;
  width: 717px;
  height: 48px;
  top: 22px;
  left: 29px;
  .top-left-bg {
    position: absolute;
    left: -10px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.2, 0.2);
    background: url('../../assets/imgs/topTitle/top-left-bg.png') no-repeat;
  }
  .top-left-words {
    position: absolute;
    left: 30px;
    width: 416px;
    height: 48px;
    opacity: 0;
    font-size: 30px;
    color: #fff;
    letter-spacing: 6px;
    text-shadow: 5px 0 6px rgba(37, 160, 255, .3), -5px 0 6px rgba(37, 160, 255, .3), 0 5px 6px rgba(37, 160, 255, .3),0 -5px 6px rgba(37, 160, 255, .3);
    // background: url('../../assets/imgs/topTitle/top-left-words.png')
    //   no-repeat;
  }
  .top-left-logo {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 375px;
    top: 10px;
    opacity: 0;
    background: url('../../assets/imgs/topTitle/logo.png') no-repeat;
  }
}
</style>
